<template>
<div>
<el-dialog
  :title="Form.id ? '编辑' :'添加'"
  :before-close="beforeClose"
  :visible.sync="dialogVisible"
  width="30%">
<el-form :model="Form"
 label-width="100px"
 :rules="rules"
 ref="fromrules"
 class="demo-ruleForm">

  <el-form-item label="所属学科" prop="subjectID" v-if="!$route.query.id" >
    <el-select v-model="Form.subjectID" placeholder="请选择活动区域" >
       <el-option v-for="item in subjectName"
       :label="item.label"
       :value="item.value"
       :key="item.value">
       </el-option>
    </el-select>
  </el-form-item>
   <el-form-item label="目录名称" prop="tagName">
    <el-input v-model="Form.tagName"></el-input>
  </el-form-item>
</el-form>
  <span slot="footer" class="dialog-footer">
    <el-button @click="beforeClose">取 消</el-button>
    <el-button type="primary" @click="submit">确 定</el-button>
  </span>
</el-dialog>
</div>
</template>

<script>
export default {
  props: ['subjectName'],
  data () {
    return {
      Form: {
        subjectID: '',
        tagName: ''
      },
      rules: {
        subjectID: [
          { required: true, message: '请输入活动名称', trigger: 'blur' }
        ],
        tagName: [
          { required: true, message: '请输入内容', trigger: 'blur' }
        ]
      },
      dialogVisible: false
    }
  },
  created () {
    console.log(this.subjectName)
  },
  methods: {
    async  submit () {
      if (this.$route.query.id) {
        this.Form.subjectID = +this.$route.query.id
      }
      this.dialogVisible = false
      this.$emit('submit', this.Form)
      // console.log(this.Form)
    },
    beforeClose () {
      this.dialogVisible = false
      this.Form = {
        subjectID: '',
        tagName: ''
      }
      this.$refs.fromrules.resetFields()
    }
  }
}
</script>

<style scoped lang='less'></style>
